<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>帅哥请登录</span>
      </div>
    </template>
       <div>
        <el-form>
          <el-form-item label="用户名" label-width="60px">
            <el-input placeholder="请输入4-16位用户名" type="text" v-model="user"></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="60px">
            <el-input placeholder="请输入4-16位密码" type="password" v-model="pass"></el-input>
          </el-form-item>
          <div class="btn">
            <el-button @click="login">登录</el-button>
            <el-button @click="reg">注册</el-button>
          </div>
          
        </el-form>
       </div>
  </el-card>
</template>
<script>
import { defineComponent ,ref} from 'vue'
import {useRouter,useRoute} from 'vue-router'
export default defineComponent({
    name:'Login',
    setup() {
        let user =ref ('');
        let pass=ref('');

        // let username=localStorage.getItem('user')
        // let password=localStorage.getItem('pass')
      

        let router=useRouter()
        let route=useRoute()


        //登录验证
        let login=()=>{
           let userp=/^[\w_]{4,16}$/
           let passp=/^[\w_]{4,16}$/
           let u=userp.test(user.value.trim())
           let p=passp.test(pass.value.trim())
           if(!u){
            alert('用户名不符合要求！')
            return false
           }
           if(!p){
                alert('密码不符合要求!')
                return false
           }
          //  if(user.value==='admin'&&pass.value==='123456'){
          //     router.push({name:'show'})
          //  }else if(localStorage.getItem(user.value==='user'&&pass.value==='pass')){
          //     router.push({name:'show'})
          //  }
           
           if(user.value===localStorage.getItem('user')&&pass.value===localStorage.getItem('pass')){
            router.push({name:'show'})
           }
        }
          
        //注册
        let reg=()=>{
            // let store=useStore();
            // let list=computed(()=>{
            //   return store.state.list
            // })
            if(localStorage['user']===user.value){
              alert('用户已存在')
            }else if(user.value===''){
              alert('用户不能为空')
            }else{
              localStorage.setItem('user',user.value);
              localStorage.setItem('pass',pass.value);
              alert('注册成功')
              user.value=''
              pass.value=''
            }
            //  router.replace('/show');
        }
        
        
        return {
            user,
            pass,
            login,
            reg,
            router,
            route,
        
            
        }
    }
})
</script>
<style scoped lang='scss'>

.box-card {
  width: 480px;
  margin: 20px auto;
    .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .text {
    font-size: 14px;
    }

    .item {
    margin-bottom: 18px;
    }
    .btn{
        display: flex;
        justify-content: space-around;
    }

}
</style>
